<script lang="ts">
export default {
  name: 'manage',
};
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref} from 'vue';

import ModelObjectEditor from './components/ModelObjectEditor.vue';
import ModelObjectProfile from './components/ModelObjectProfile.vue';


import {RepoCompObjectEntity} from "@/api/cloud/repository/repocomp/model/version/types";
import {getRepoCompObjectEntity} from "@/api/cloud/repository/repocomp/model/version";

const modelObjectProfileRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样
const modelObjectEditorRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样

const dataState = reactive({
  versionId: '',
  objectId: '',
  entity: {} as RepoCompObjectEntity,
});


/**
 * 刷新页面信息
 */
function handleQuery() {
  getRepoCompObjectEntity(dataState.versionId, dataState.objectId).then(({data}) => {
    modelObjectProfileRef.value.initData(data);
    modelObjectEditorRef.value.initData(data);
  });

}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  let param = location.search.split('?')[1];
  let searchParams = new URLSearchParams(param);
  dataState.versionId = searchParams.get('versionId') as string;
  dataState.objectId = searchParams.get('objectId') as string;

  // 向后台查询详细信息
  handleQuery();
});

</script>

<template>
  <div class="app-container">

    <!-- 表单头：各种按钮 -->
    <model-object-profile ref="modelObjectProfileRef"
    />


    <!-- 数据表单：创建/修改 -->
    <model-object-editor ref="modelObjectEditorRef"
    />

  </div>
</template>
